
<template>
  <div ref="appRef" class="app">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom">
      <ul class="tabBar">

        <li v-for="(item, index) in tabBarList" @click="goToPage(item.path, index)">
          <img :src="getdiimg1(index == activeIcon ? item.activeIcon : item.icon)" />
        </li>
      </ul>


    </div>

    <div class="content_wrapper">
      <RouterView />
    </div>
    <!-- bar  -->
  </div>
</template>
<script setup>
import { RouterView,useRouter } from 'vue-router'
import {onMounted,onUnmounted,ref} from "vue"
// import useDraw from '@/utils/useDraw'

    // * 适配处理
    // const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
    const activeIcon = ref('0');  //底部图片默认展示第0个亮
    const $router = useRouter()
    const tabBarList = ref([
  { "title": "就业态势", path: "/jobDirection", icon: "./assets/images/job_icon.png", activeIcon: "./assets/images/job_active_icon.png" },
  { "title": "设备运维", path: "/deviceWorking", icon: "./assets/images/working_icon.png", activeIcon: "./assets/images/working_active_icon.png" },
  { "title": "职能检测", path: "/intelligenceCheck", icon: "./assets/images/check_icon.png", activeIcon: "./assets/images/check_active_icon.png" },
  { "title": "安防管理", path: "/safeManager", icon: "./assets/images/safe_icon.png", activeIcon: "./assets/images/safe_active_icon.png" }
])
const getdiimg1 = (path) => {
  return new URL(`${path}`, import.meta.url).href
};
const goToPage = (path,index)=>{
  $router.push(path)
  activeIcon.value=index
}
    // 生命周期
    onMounted(() => {
      // todo 屏幕适应
      // windowDraw()
      // calcRate()
    })

    onUnmounted(() => {
      // unWindowDraw()
    })
</script>

<style lang="scss" scoped>
.app {
  width: 100%;
  height: 100%;
  background: url("./assets/images/pageBg.png") no-repeat 100% 100%;
  background-size:100% 100%;
  // transform-origin: left top;

  .left {
    // border:10px solid red;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    background: url("./assets/images/Photo／背景／Left@2x.png") no-repeat center;
    background-size: 605px 100%;
    
    width: 605px;
    height: 100%;
  }
  .top {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background: url("./assets/images/Photo／背景／Top@2x.png") no-repeat;
    background-position: center center;
    background-size: cover;
    width: 1920px;
    height: 95px;
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;

    background: url("./assets/images/Photo／背景／Right@2x.png") no-repeat center;
    background-size: 605px 100%;
    
    width: 605px;
    height: 100%;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 20;
    margin-left: -546px;
    background: url("./assets/images/Photo／背景／菜单栏@2x.png") no-repeat center;
    background-size:100% 100%;
    width: 1092px;
    height: 124px;

    .tabBar {
      display: flex;
      justify-content: center;

      li {
        cursor: pointer;
        width: 100px;
        height: 100px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .content_wrapper {
    // background-color: rgba(#f0d9d9, 0.3);
    // background: url("./assets/images/pageBg.png") no-repeat center;
    z-index: 11;
    position: absolute;
    top: 95px;
    left: 60px;
    bottom: 40px;
    right: 60px;
  }
}
</style>
